<template>
  <div class="com">
    <div class="seachlist">
      <div class="listitem">
        <div class="itemname">统计时段</div>
         <el-date-picker
      v-model="value1"
      style="width:250px;"
      type="monthrange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份">
    </el-date-picker>
      </div>
      
 
      <div class="listitem">
       
        <el-button type="primary" icon="el-icon-search" style="margin-left:20px;">搜索</el-button>
      </div>
    </div>
    <!-- <div class="infocom">
      <div class="item">
        <chart name="one1" :data="eacher1"></chart>
      </div>
      <div class="item">
        <chart name="one2" :data="eacher1"></chart>
      </div>
    </div> -->
    <div class="bing1">
      <div class="bingitems">
        <chart name="one3" :data="bing"></chart>
      </div>
      <div class="bingitems">
        <chart name="one4" :data="bing"></chart>
      </div>
    </div>
    <div class="bing3">
     <div class="e3bing">
        <chart name="one7" :data="bing"></chart>
     </div>
     <div class="e3bing">
        <chart name="one5" :data="bing"></chart>
     </div>
     <div class="e3bing">
        <chart name="one6" :data="bing"></chart>
     </div>
    </div>
    <div class="bing1" style="margin-bottom:300px;">
      <div class="bingitems">
        <chart name="one8" :data="bing"></chart>
      </div>
      <div class="bingitems">
        <chart name="one9" :data="bing"></chart>
      </div>
    </div>
  </div>
</template>
<script>
import chart from '../decision_data/components/echarts'
export default {
  components:{
    chart
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      value1: "",
      //饼图
      bing:{

    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]

      },
     
    };
  }
};
</script>
<style lang="scss" scoped>
.seachlist {
  width: 97%;
  
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  .listitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 100px;
    }
  }
}
.infocom{
  width: 100%;

}
.item{
  width: 90%;
  height: 350px;
  // background: red;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
.bing1{
  width: 97%;
  margin: 0 auto;
  height: 350px;
  display: flex;
  margin-top: 20px;
  .bingitems{
    height: 100%;
    width: 50%;
  }
}
.bing3{
  width: 97%;
  height: 350px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  .e3bing{
    width: 33%;
        height: 100%;
  }
}
</style>